<template>
  <div class="play_list_contaner padd100">
    <el-row :gutter="20">
      <el-col :lg="4">
        <div style="overflow:hidden">
          <el-menu class="el-menu-vertical-demo" :default-active="menuDefaultActive">
            <el-menu-item index="-1" @click="menuClickAll('全部')">全部</el-menu-item>
            <el-sub-menu :index="index + 1" v-for="(item,index) in leftMenu" :key="index">
              <template #title>
                <template v-if="item.category === '语种'">
                  <el-icon>
                    <PriceTag />
                  </el-icon>
                </template>
                <template v-if="item.category === '风格'">
                  <el-icon>
                    <MostlyCloudy />
                  </el-icon>
                </template>
                <template v-if="item.category === '场景'">
                  <el-icon>
                    <Guide />
                  </el-icon>
                </template>
                <template v-if="item.category === '情感'">
                  <el-icon>
                    <Sunny />
                  </el-icon>
                </template>
                <template v-if="item.category === '主题'">
                  <el-icon>
                    <House />
                  </el-icon>
                </template>
                <span>{{item.category}}</span>
              </template>
              <el-menu-item :index="index + 1 + '-' + indexs" v-for="(items,indexs) in item.sub" :key="indexs"
                @click="menuClick(e,items)">
                <!-- <div class="menu_left">
                  <img :src="items.imgUrl" alt="">
                </div> -->
                <div class="menu_right">
                  {{items.name}}
                </div>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </el-col>
      <el-col :lg="20">
        <div class="right_list_container">
          <div class="top_b_m_tit">
            <div class="left_tit">
              <div>{{catString}}</div>
            </div>
            <div class="right_opea">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{commandStr}}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="hot">热门</el-dropdown-item>
                    <el-dropdown-item command="new">最新</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <el-row :gutter="20" v-loading="loading" element-loading-text="正在玩命加载...">
            <div v-if="playListData.length<=0" style="width:100%">
              <el-empty description="暂无数据~" />
            </div>
            <el-col :lg="4" :sm="6" :md="6" :xs="12" v-for="item in playListData" style="margin-bottom:20px" v-else>
              <MusicHead :playCount="item.playCount" :name="item.name"
                @handleClickToListDetail="handleClickToListDetail" :coverImgUrl="item.coverImgUrl + '?param=220y140'"
                :nickName="item.creator.nickname" :id="item.id" :authorId="item.creator.userId" />
            </el-col>
          </el-row>
          <div class="pageination_center" style="margin-top:40px">
            <el-pagination v-show="total > 0" v-model:currentPage="pageNum" :page-size="36" :total="total"
              @current-change="handleCurrentChange" background layout="prev, pager, next" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from "vue"
import { Headset, Plus, Timer, VideoPlay, Comment, FolderAdd, Pointer, PriceTag, House, Sunny, Guide, MostlyCloudy, ArrowDown } from '@element-plus/icons-vue'
import { getPlayListCate, getTopPlayList } from "@/api/playlist";
import MusicHead from "@/components/MusicHead/index";
import router from '@/router';
import { useRoute } from "vue-router";
interface Obj {
  category: string,
  sub: Array<any>
}
const menuDefaultActive = ref<string>('-1')
const route = useRoute()
const leftMenu = ref<any[]>([])
const catString = ref<any>('全部')
const pageNum = ref<number>(1)
const limit = ref<number>(36)
const total = ref<number>(0)
const order = ref<string>('hot')
// 歌单数据数组
const playListData = ref<any[]>([])
const loading = ref<boolean>(false)
// 路径参数
const { tag } = route.query
// 获取歌单分类
const getPlayListCategoryData = async () => {
  const res: any = await getPlayListCate()
  let menuArr = []
  for (let i in res.categories) {
    let index = i;    //对象中的每一项的键名
    let value = res.categories[index];   //对象中的每一项的值
    let obj: Obj = {
      category: value,
      sub: []
    }
    menuArr.push(obj)
  }
  menuArr.forEach((item, index) => {
    res.sub.forEach((items: any, indexs: number) => {
      if (index === items.category) {
        item.sub.push(items)
      }
    })
  })
  // 为每个子菜单添加上对应的索引，上方因为是异步请求 索引是乱的 索引在这里专门开循环来往子菜单添加索引属性
  menuArr.forEach((item, index) => {
    item.sub.forEach((items, indexs) => {
      items.idx = index + 1 + '-' + indexs
    })
  })
  leftMenu.value = menuArr
  if (tag) {
    // 如果路径有tag参数默认选中menu组件对应的index
    leftMenu.value.forEach(item => {
      let subObj = item.sub.find((o: { name: string; }) => o.name === tag)
      if (subObj) {
        // console.log(subObj);
        menuDefaultActive.value = subObj.idx
      }
    })
  }
}
// 获取歌单数据
const getTopPlayListData = async () => {
  try {
    loading.value = true
    const res: any = await getTopPlayList({
      cat: catString.value,
      limit: limit.value,
      offset: (pageNum.value - 1) * limit.value,
      order: order.value
    })
    catString.value = res.cat
    total.value = res.total
    playListData.value = res.playlists
  } finally {
    loading.value = false
  }
}
const menuClick = (e: Event, item: any) => {
  // console.log(item.name);
  catString.value = item.name
  // 重置页数
  pageNum.value = 1
  getTopPlayListData()
  if (tag) {
    // 清空路由参数😁
    router.push('/discover/playlist')
  }
}
const menuClickAll = (str: string) => {
  // console.log(str);  
  catString.value = str
  pageNum.value = 1
  getTopPlayListData()
  if (tag) {
    // 清空路由参数😁
    router.push('/discover/playlist')
  }
}
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  getTopPlayListData()
}
const handleCommand = (command: string) => {
  order.value = command
  pageNum.value = 1
  getTopPlayListData()
}
const commandStr = computed(() => {
  // get() {
  //   if( order.value === 'hot'){
  //     return "热门"
  //   }
  //   return "最新"
  // },
  // set(v){

  // }
  if (order.value === 'hot') {
    return "热门"
  }
  return "最新"
})
// 如果路径有参数 直接赋值对应的分类字符串发请求😁
if (tag) {
  catString.value = tag
  pageNum.value = 1
  getTopPlayListData()
}
// 去歌单详情页
const handleClickToListDetail = (ids: number) => {
  router.push({
    name: 'play-list-detail',
    params: {
      id: ids
    }
  })
}
onMounted(async () => {
  await getPlayListCategoryData()
  getTopPlayListData()
})
</script>
<style lang="scss" scoped>
.play_list_contaner {
  margin-top: 20px;
}

.right_list_container {}

.top_b_m_tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
  margin-bottom: 30px;

  .left_tit {
    color: #333;
    font-size: 20px;
    display: flex;

    span {
      color: #666;
      font-size: 12px;
      margin-top: 10px;
      margin-left: 14px;
    }
  }
}

:deep(.el-menu-item.is-active) {
  background: #169af3;
  color: #fff;
}
</style>
